<template>

    <div class="brand-wrapper">
        <!--导航头-->
        <div style="margin-top: 10px" >
            <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 15px;f">
                <el-breadcrumb-item>B2C销售管理</el-breadcrumb-item>
                <el-breadcrumb-item>销售订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>销售统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--分割线-->
        <el-divider></el-divider>
        <!--分页查询条件-->
        <div style="margin-top: 20px">
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="商品名称">
                    <el-input v-model="searchMarketData.goodsName" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item  label="商品分类" style="margin-left: 20px">
                    <el-select  v-model="searchMarketData.typeNubmer"  placeholder="全部" >
                        <el-option v-for="item in typeIdList" :key="item" :label="item"
                                   :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="商品品牌" style="margin-left: 20px">
                    <el-select  v-model="searchMarketData.brandId"  placeholder="全部" >
                        <el-option v-for="item in brandIdList" :key="item" :label="item"
                                   :value="item"></el-option>
                    </el-select>
                </el-form-item><br>
                <el-form-item  label="商品颜色" >
                    <el-select  v-model="searchMarketData.productColorId"  placeholder="全部" >
                        <el-option v-for="item in productColorIdList" :key="item" :label="item"
                                   :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <!--操作功能-->
                <el-form-item style="margin-left: 30px">
                    <el-button type="primary" icon="el-icon-edit" @click="findTotalMarketBylike">查询</el-button>
                    <el-button type="success" size="mini" icon="el-icon-edit" >导出</el-button>
                    <el-button type="warning" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--分页数据-->
        <div class="data-box">
            <el-table
                    :data="tableData"
                    style="width: 85%"
                    align="center">
                <el-table-column
                        align="center"
                        prop="goodsId"
                        label="商品编码"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="goodsName"
                        label="商品名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="typeId"
                        label="商品分类">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="brandId"
                        label="商品品牌">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="productId"
                        label="商品型号">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="productColorId"
                        label="商品颜色">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="totalGoods"
                        label="商品销量">
                </el-table-column>
            </el-table>
            <!--    分页-->
            <div class="page-box" >
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="searchMarketData.pageSize"
                        :current-page="searchMarketData.currentPage"
                        @current-change="currentPageChange"
                        align="right">
                </el-pagination>

            </div>
        </div>
    </div>




</template>

<script>
import total_market from "./index";

export  default  total_market;
</script>

<!--src 引用css样式-->
<style src="./index.scss"  lang="scss"></style>